/*
 * @file webpack配置文件(开发环境)
 * @author liutianjiao
 * @date 2017-09-05
 */
const path = require('path');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const port = 3033;

module.exports = {
    devtool: 'source-map',
    entry: {
        bundle: './src/app.jsx',
        vendor: ['react', 'react-dom', 'redux'],
    },
    output: {
        path: path.join(__dirname, '/build'),
        filename: '[name].[hash:5].js',
        chunkFilename: "js/[name].chunk.js" //给每个分片产生一个文件
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true
                    }
                }]
            },
            {
                test: /\.(css|less)$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader:'css-loader'
                        },
                        {
                            loader:'postcss-loader'
                        },
                        {
                            loader:'less-loader',
                            options: {
                                javascriptEnabled: true,
                            }
                        }
                    ]
                }),
            },
            {
                test: /\.scss/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader:'css-loader'
                        },
                        {
                            loader:'postcss-loader'
                        },
                        {
                            loader:'sass-loader'
                        },
                    ]
                }),
            },

            {
                test: /\.(eot|woff|eot|ttf|svg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 999999999999999,  //这里要足够大这样所有的字体图标都会打包到css中
                    }
                }
            },
            {
                test: /\.jpg|png$/,
                use: ['url-loader']
            }
        ]
    },
    resolve : {
        extensions: [".js", ".jsx", ".less", ".css", ".json"],
    },
    plugins: [
        new OpenBrowserPlugin({
            url: `http://localhost:${port}`
        }),
        new HtmlWebpackPlugin({
            title: '小众点评',
            favicon: './src/assets/images/logo3.png'
            // template:'./src/index.html',
            // cache: false,
            // inject:true,    //允许插件修改哪些内容，包括head与body
        }),
        new ExtractTextPlugin({
            filename: 'css/[name][hash:8].css',
            allChunks: true
        }),
    ],
    devServer: {
        compress: false, // 启用gzip压缩
        contentBase: path.join(__dirname, 'src'),
        port: port, // 运行端口3000
        inline: true,
        hot: true,
        host: '0.0.0.0',
        historyApiFallback: true,
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: 'commons',
                    chunks: 'initial',
                    minChunks: 2
                }
            }
        }
    }
};
// modifyVars:{
//     "primary-color":"rgba(0, 0, 0, .7)",
//     "heading-color": "#fff",
//     "text-color": "#fff",
//     "text-color-secondary": "#fff",
//     "input-bg": "rgba(0, 0, 0, 0)",
//     "layout-body-background": "rgba(0, 0, 0, 0)",
//     "layout-header-background ": "rgba(0, 0, 0, 0)",
//     "layout-sider-background-light": "rgba(0, 0, 0, 0)",
//     "component-background": "rgba(0, 0, 0, 0)",
//     "popover-bg": "#444444",
//     "border-color-split ": "rgba(255,255,255,.125)",
// }